<template>

  <div class="footer">
    <van-tabbar v-model="active">
      <van-tabbar-item name="index" :to="{ path: '/index'}">
        <div class="flex">
        <van-icon name="home-o" size="22" />
        <span class="tab-text">课程学习</span>
        </div>
      </van-tabbar-item>
      <van-tabbar-item name="examination" :to="{ path: '/examination'}">
        <div class="flex">
          <van-icon name="description" size="22" />
          <span class="tab-text">课程考试</span>
        </div>
      </van-tabbar-item>

      <van-tabbar-item name="exchange" :to="{ path: '/exchange'}">
        <div class="flex">
          <van-icon name="comment-o" size="22" />
          <span class="tab-text">学习交流</span>
        </div>
        </van-tabbar-item>

      <van-tabbar-item name="user" :to="{ path: '/user'}">
        <div class="flex">
          <van-icon name="setting-o" size="22" />
          <span class="tab-text">个人中心</span>
        </div>
        </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        active: this.$route.path.slice(1)
      }
    }
  }
</script>

<style scoped>

  .flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .tab-text {
    margin-top:3px;
  }
  .footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: .36rem;
    background-color: #fff;
  }
  .footer_item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    text-align: center;
    font-size: .42rem;
    color: #bfbfbf;
  }
  .footer_item .footer_item-text {
    padding-top: 3px;
    font-size: .24rem;
  }
</style>
